<template>
    <el-card class="box-card" style="margin: 10px 0px">
        <div slot="" class="clearfix">
            <!-- @tab-click="handleClick" -->
            <!-- 头部左侧内容 -->
            <el-tabs class="tab left" v-model="activeName">
                <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                <el-tab-pane label="访问量" name="visit"></el-tab-pane>
            </el-tabs>
            <!-- 头部右侧内容 -->
            <div class="right">
                <span @click="setDay">今日</span>
                <span @click="setWeek">本周</span>
                <span @click="setMonth">本月</span>
                <span @click="setYear">本年</span>
                <el-date-picker
                    class="date"
                    type="daterange"
                    v-model="date"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </div>
        </div>
        <div>
            <el-row :gutter="10">
                <el-col :span="16">
                    <!-- 容器 -->
                    <div class="charts" ref="charts"></div>
                </el-col>
                <el-col :span="8">
                    <h5>门店{{ title }}排名</h5>
                    <ul class="list">
                        <li
                            v-for="(item, index) in this.list.orderRank"
                            :key="index"
                        >
                            <span :class="{ 'list-num': index <= 2 }"
                                ><span>{{ item.no }}</span></span
                            ><span>{{ item.name }}</span
                            ><span>{{ item.money }}</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
import * as echarts from "echarts"
import dayjs from "dayjs"
import { mapState } from "vuex"
export default {
    name: "Sale",
    data() {
        return {
            activeName: "sale",
            myCharts: null,
            // 收集日历的数据
            date: "",
        }
    },
    methods: {
        // 设置今日日期
        setDay() {
            const day = dayjs().format("YYYY-MM-DD")
            this.date = [day, day]
        },
        // 设置本周
        setWeek() {
            // 周一
            const start = dayjs().day(1).format("YYYY-MM-DD")
            // 周日
            const end = dayjs().day(7).format("YYYY-MM-DD")
            this.date = [start, end]
        },
        // 设置本月
        setMonth() {
            // 本月开始第一天
            const start = dayjs().startOf("month").format("YYYY-MM-DD")
            const end = dayjs().endOf("month").format("YYYY-MM-DD")
            this.date = [start, end]
        },
        // 设置本年
        setYear() {
            // 本月开始第一天
            const start = dayjs().startOf("year").format("YYYY-MM-DD")
            const end = dayjs().endOf("year").format("YYYY-MM-DD")
            this.date = [start, end]
        },
    },
    computed: {
        // 右侧内容标题
        title() {
            return this.activeName == "sale" ? "销售额" : "访问量"
        },
        ...mapState("home", ["list"]),
    },
    watch: {
        title() {
            // 重新修改 图表配置的数据
            return this.myCharts.setOption({
                title: {
                    text: `${this.title}趋势`,
                    textStyle: {
                        fontSize: 15,
                        lineHeight: 56,
                    },
                },
                xAxis: [
                    {
                        data:
                            this.title == "销售额"
                                ? this.list.orderFullYearAxis
                                : this.list.userFullYearAxis,
                    },
                ],
                series: [
                    {
                        data:
                            this.title == "销售额"
                                ? this.list.orderFullYear
                                : this.list.userFullYear,
                    },
                ],
            })
        },
        // 监听是否有list数据有就初始化
        list() {
            // 初始化echarts实例
            this.myCharts = echarts.init(this.$refs.charts)
            // 配置对象
            const option = {
                title: {
                    text: this.title + "趋势",
                    textStyle: {
                        fontSize: 15,
                        lineHeight: 56,
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                            shadowBlur: 5,
                        },
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.list.orderFullYearAxis,
                        axisTick: {
                            alignWithLabel: true,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "Direct",
                        type: "bar",
                        barWidth: "35%",
                        data: this.list.orderFullYear,
                    },
                ],
            }
            // 配置对象设置
            option && this.myCharts.setOption(option)
        },
    },
}
</script>

<style>
.clearfix {
    position: relative;
}
.left {
    padding: 0;
    border: none;
}

.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e7ed;
    z-index: 1;
}
.el-tabs__active-bar {
    height: 1px;
}
.right {
    display: flex;
    position: absolute;
    right: 0;
    top: 5px;
    align-items: center;
    justify-content: space-around;
    width: 35%;
    font-size: 14px;
}
.date {
    width: 250px !important;
}

.charts {
    width: 100%;
    height: 300px;
}
.list {
    width: 100%;
    height: 300px;
    padding: 0;
    list-style: none;
}
.list li {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}
.list li span:nth-child(2) {
    width: 50%;
}
.list li span:nth-child(1) {
    width: 20px;
    text-align: center;
}
.list-num {
    color: white;
    display: flex;
    align-items: center;
    background-color: black;
    border-radius: 50%;
    font-size: 12px;
}
</style>